<template>
  <views class="account_set">
    <viewTitle :title="'账户设置'" :border="false"></viewTitle>
    <div class="account_set_item flex flexR">
      <div class="flex flexR public_key">
        <div class="title-top">银行卡账号:</div>
        <div class="public_key_input">
          <el-input type="text" placeholder="请输入银行卡账号" v-model="bank_code" :disabled="disable"></el-input>
        </div>
      </div>
      <div class="flex flexR public_key">
        <div class="title-top">开户银行:</div>
        <div class="public_key_input">
          <el-input type="text" placeholder="请输入开户银行" v-model="bank_name" :disabled="disable"></el-input>
        </div>
      </div>
    </div>
    <div class="account_set_item flex flexR">
      <div class="flex flexR public_key">
        <div class="title-top">开户名称:</div>
        <div class="public_key_input">
          <el-input type="text" placeholder="请输入开户名称" v-model="bank_account" :disabled="disable"></el-input>
        </div>
      </div>
      <div class="flex flexR public_key">
        <div class="title-top">预留手机号:</div>
        <div class="public_key_input">
          <el-input type="text" placeholder="请输入预留手机号" max="11" v-model="bank_mobile" :disabled="disable"></el-input>
        </div>
      </div>
    </div>
    <div class="account_set_item flex flexR">
      <div class="flex flexR public_key">
        <div class="title-top bank_region">开户城市:</div>
        <div class="public_key_input">
          <el-input type="text" placeholder="请输入开户城市" v-model="bank_region" :disabled="disable"></el-input>
        </div>
      </div>
      <div class="flex flexR public_key"></div>
    </div>

    <div class="save-btn">
      <el-button type="success" @click="edit">编辑</el-button>
      <el-button type="primary" @click="save">保存</el-button>
      <el-button type="info" @click="cancel">取消</el-button>

    </div>
  </views>
</template>


<script>
export default {
  name: "account_set",
  data() {
    return {
      disable: true,     //是否能够编辑input框中的内容
      bank_code: "", // 银行卡号
      bank_mobile: "", // 预留手机号
      bank_name: "", // 开户银行
      bank_account: "", // 银行户名
      bank_region: "", // 开户城市
      back_data: [],    // 还原用的数据
    };
  },
  methods: {
    edit(){
      this.disable = false;
    },
    cancel(){
      this.disable = true;
      this.bank_code = this.back_data.bank_code; // 银行卡号
      this.bank_mobile = this.back_data.bank_mobile; // 预留手机号
      this.bank_name = this.back_data.bank_name; // 开户银行
      this.bank_account = this.back_data.bank_account; // 银行户名
      this.bank_region = this.back_data.bank_region; // 开户城市
    },

    save() {
      if(this.disable)    return this.$message.error("请先点击'编辑'按钮，进入编辑状态"); 
      if (!this.bank_code)  return this.$message.error("银行卡号不能为空");
      if (!this.bank_mobile)   return this.$message.error("预留手机号码不能为空");
      if (!this.bank_name)   return this.$message.error("开户银行不能为空");
      if (!this.bank_account)  return this.$message.error("银行户名不能为空");
      if (!this.bank_region)  return this.$message.error("开户城市不能为空");

      let data = this.$api.sendSync(this.$mapapi.a_agentPlan, {
        bank_code: this.bank_code, // 银行卡号
        bank_mobile: this.bank_mobile, // 预留手机号
        bank_name: this.bank_name, // 开户银行
        bank_account: this.bank_account, // 银行户名
        bank_region: this.bank_region // 开户城市
      });
      if (data.code == 200) {
        this.$message.success(data.msg);
        this.$parent.toHome();
        this.$router.push({ path: "/" });
      } else {
        return this.$message.error(data.msg);
      }
    },
    getData() {
      let data = this.$api.sendSync(this.$mapapi.a_agent_bank);
      if (data.code == 200) {
        this.back_data = data.data;     //将数据存入 back_data 用于还原
        this.bank_code = data.data.bank_code; // 银行卡号
        this.bank_mobile = data.data.bank_mobile; // 预留手机号
        this.bank_name = data.data.bank_name; // 开户银行
        this.bank_account = data.data.bank_account; // 银行户名
        this.bank_region = data.data.bank_region; // 开户城市
      }
      console.log("账户信息", data);
    }
  },
  mounted() {
    this.getData();
  },
  created() {}
};
</script>


<style lang="less"  scope="true"  src="@/style/account/account_set.less" >
</style>